//新增/编辑投标

<template>
  <div class="add_edit_bid">
    <!-- ===================================================== -->
    <!-- 表单 -->
    <el-form :inline="true" :model="bidProject" class="addBid" label-width="250px">
      <!-- 添加投标信息 -->
      <el-form-item label="项目名称:">
        <el-input class="project_name" v-model="bidProject.name" placeholder="请输入" style="width: 200px"></el-input>
      </el-form-item>
      <!-- =========== -->
      <el-form-item label="所在地区:">
        <el-select class="project_area" v-model="bidProject.area" placeholder="请选择" style="width: 200px">
          <el-option v-for="item in options_project_area" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- =========== -->
      <el-form-item label=" 开发商名称:">
        <el-input class="project_developers" v-model="bidProject.kaiFaName" placeholder="请输入" style="width: 200px">
        </el-input>
      </el-form-item>
      <!-- =========== -->
      <el-form-item label="投标开始日期:">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="bidProject.bidBeginDate" style="width: 200px;">
          </el-date-picker>
        </el-col>
      </el-form-item>
      <!-- =========== -->
      <el-form-item label="投标结束日期:">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="bidProject.bidEndDate" style="width: 200px;">
          </el-date-picker>
        </el-col>
      </el-form-item>
      <!-- =========== -->
      <el-form-item label="保证金是否缴纳:">
        <el-switch v-model="bidProject.payMoney" :active-value="1" :inactive-value="0" active-color="#13ce66"
          inactive-color="#ff4949"></el-switch>
      </el-form-item>
    </el-form>

    <!-- 成员管理 -->
    <div class="member_management">
      <el-button type="success" class="add_btn" @click="member_dialogVisible = true">新增成员:</el-button>
      <el-table :data="member_add_tableData" border style="width: 100%">
        <el-table-column label="序号" width="180">
          <template slot-scope="scope">{{
              scope.$index + (taxis_pager.page - 1) * taxis_pager.pagerow + 1
          }}</template>
        </el-table-column>
        <el-table-column prop="headPic" label="头像" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名">
        </el-table-column>
        <el-table-column prop="phone" label="手机号">
        </el-table-column>
        <el-table-column prop="buMen" label="部门">
        </el-table-column>
        <el-table-column prop="jobs" label="岗位">
        </el-table-column>
        <el-table-column label="操作">
          <el-button type="text" @click="remove_member">移除</el-button>
          <el-button type="text" @click="setting_member">设为负责人</el-button>
        </el-table-column>
      </el-table>

    </div>

    <!-- 工作计划 -->
    <div class="work_plan">
      <el-button type="success" class="create_plan" @click="plan_dialogVisible = true">创建计划:</el-button>
      <el-table :data="work_plan_tableData" border style="width: 100%">
        <el-table-column label="序号" width="180">
          <template slot-scope="scope">{{
              scope.$index + (taxis_pager.page - 1) * taxis_pager.pagerow + 1
          }}</template>
        </el-table-column>
        <el-table-column prop="name" label="分项" width="180">
        </el-table-column>
        <el-table-column prop="describe" label="描述">
        </el-table-column>
        <el-table-column prop="chargeName" label="负责人">
        </el-table-column>
        <el-table-column prop="beginDate" label="开始日期">
        </el-table-column>
        <el-table-column prop="endDate" label="结束日期">
        </el-table-column>
        <el-table-column label="操作">
          <el-button type="text" @click="edit_plan">编辑</el-button>
          <el-button type="text" @click="del_plan">删除</el-button>
        </el-table-column>
      </el-table>
    </div>

    <!-- 新增成员弹窗 -->
    <el-dialog title="选择成员" :visible.sync="member_dialogVisible">
      <div class="member_content">
        <div class="member_input">
          <!-- 查询输入框 -->
          <el-form :model="member_form">
            <el-form-item label="姓名" :label-width="formLabelWidth">
              <el-input v-model="member_form.name" autocomplete="off" placeholder="请选择" style="width: 250px">
              </el-input>
            </el-form-item>
            <el-form-item label="所属部门" :label-width="formLabelWidth">
              <el-select v-model="member_form.buMen" placeholder="请选择" style="width: 250px">
                <el-option label="部门一" value="bumen_a"></el-option>
                <el-option label="部门二" value="bumen_b"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>

        <div class="member_btn" style="float: right; margin-bottom: 20px">
          <el-button type="primary" @click="selectTableMember">查询</el-button>
          <el-button type="primary">重置</el-button>
        </div>

        <div class="member_table">
          <el-table :data="member_table_data" border style="width: 100%">
            <el-table-column property="headPic" label="头像" width="100"></el-table-column>
            <el-table-column property="name" label="姓名" width="100"></el-table-column>
            <el-table-column property="phone" label="手机号" width="100"></el-table-column>
            <el-table-column property="buMen" label="部门" width="100"></el-table-column>
            <el-table-column property="depatment" label="岗位" width="100"></el-table-column>
            <el-table-column property="todo" label="操作"></el-table-column>
          </el-table>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="member_dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="member_dialogVisible = false">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 创建计划弹窗 -->
    <el-dialog title="编辑投标工作计划" :visible.sync="plan_dialogVisible">
      <el-form :model="workPlans">
        <el-form-item label="分项名称" :label-width="formLabelWidth">
          <el-input v-model="workPlans.name" autocomplete="off" style="width: 350px"></el-input>
        </el-form-item>
        <el-form-item label="工期" :label-width="formLabelWidth">
          <el-select v-model="workPlans.beginDate" placeholder="开始日期" style="width: 160px;margin-right: 30px;">
            <el-option label="2015-3-3" value="2015-3-3"></el-option>
            <el-option label="2016-1-8" value="2016-1-8"></el-option>
          </el-select>
          <el-select v-model="workPlans.endDate" placeholder="结束日期" style="width: 160px">
            <el-option label="2016-7-7" value="2016-7-7"></el-option>
            <el-option label="2013-1-1" value="2013-1-1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="负责人" :label-width="formLabelWidth">
          <el-select v-model="workPlans.chargeName" placeholder="请选择" style="width: 350px">
            <el-option label="1" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工作描述" :label-width="formLabelWidth">
          <el-input v-model="workPlans.describe" type="textarea" :rows="2" placeholder="请输入内容" style="width: 350px">
          </el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="plan_dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="plan_dialogVisible = false; addPlan()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 保存/取消按钮 -->
    <div class="save_btn">
      <el-button type="success" class="save_btn" @click="addBid">保存</el-button>
      <el-button class="cancel_btn" @click="cancelChange">取消</el-button>
    </div>
  </div>
</template>

<style src="../../../../style/project/bid.css">
</style>    

<script>
import bidMixin from "../../../../minxins/projectMixin/bidMixin";
export default {
  mixins: [bidMixin],
  components: {},
  data() {
    return {
      // 项目id
      bid_project_id: 1,

      //新增成员传后端
      projectBidMember:
      {
        bidProjectId: 0,
        buMen: "",
        charge: 0,
        headPic: "",
        id: 0,
        jobs: "",
        name: "",
        phone: "",
      },

      //创建计划传后端
      workPlans:
      {
        beginDate: "",
        bidProjectId: 1,
        chargeName: "",
        describe: "",
        endDate: "",
        id: 2,
        name: "",
        statu: 0
      },

      bidProject: {
        "area": "",
        "bidBeginDate": "",
        "bidEndDate": "",
        "bidMoney": 0,
        "chargeName": "",
        "createName": "",
        "id": 0,
        "kaiFaName": "",
        "name": "",
        "payMoney": 0,
        "projectBidMembers": this.projectBidMembers,
        "statu": 0,
        "workPlans": this.workPlans,
      },

      // ========================
      // 选择框
      options_deposit_payment: [
        {
          value: 1,
          label: "是",
        },
        {
          value: 0,
          label: "否",
        },
      ],
      options_project_area: [
        {
          value: "成都",
          label: "成都",
        },
        {
          value: "上海",
          label: "上海",
        },
      ],
      // ========================
      // 渲染成员/计划表格
      member_add_tableData: [],
      work_plan_tableData: [],
      // ====================================================
      // 弹框
      // 新增成员
      member_dialogVisible: false,
      // 获取输入框数据
      member_form: {
        name: "",
        buMen: "",
      },
      //获取投标成员
      member_table_data: [],
      formLabelWidth: "100px",

      // 创建计划
      plan_dialogVisible: false,
    };
  },
  methods: {
    // 新增投标
    // ====================================
    // 渲染成员
    getMember() {
      this.$projectApi.searchBitMember(this.bid_project_id).then(res => {
        console.log(res);
        if (res.data.code == 200) {
          this.member_add_tableData = res.data.data;
        }
      })
    },
    // 成员表格操作
    remove_member() { },
    setting_member() { },

    //渲染计划
    getPlan() {
      this.$projectApi.searchBitPlan(this.bid_project_id).then(res => {
        console.log(res);
        if (res.data.code == 200) {
          this.work_plan_tableData = res.data.data;
        }
      })
    },

    // 计划表格操作
    edit_plan() { },
    del_plan() { },

    // ====================================
    //弹窗
    //渲染/查询成员表格
    getTableMember() {
      console.log('渲染成员表格');
      this.$projectApi.searchEmp(this.member_form.name, this.member_form.buMen).then(res => {
        console.log(res);
        if (res.data.code == 200) {
          this.member_table_data = res.data.data;
        }
      })
    },
    //查询表格成员
    selectTableMember() {
      console.log('查询成员表格');
      this.$projectApi.searchEmp(this.member_form.name, this.member_form.buMen).then(res => {
        console.log(res);
        if (res.data.code == 200) {
          this.member_table_data = res.data.data;
        }
      })
    },
    // 新增成员
    addMember() {
      // this.$projectApi.searchBitMember()
    },
    // 创建计划
    addPlan() {
      console.log('创建计划');
      console.log(this.workPlans);
      this.$projectApi.addPlan(this.workPlans).then(res => {
        console.log(res);
        if (res.data.code == 200) {
          this.work_plan_tableData = res.data.data;
        }
      })
    },

    // ====================================
    // 新增投标
    addBid() {
      // let data = this.bidProject;
      // this.$projectApi.addBid(data).then(res => {
      //   if (res.data.code == 200) {
      //     console.log(this.bid_tableData);
      //   } else {
      //     console.log(res.data.msg);
      //   }
      // });
      // 跳转至Bid
      this.$router.push('/project/bid')
    },

    // 取消新增
    cancelChange() {
      this.$router.push("/project/bid");
    },
  },

  mounted() {
    this.getMember()
    this.getPlan()
    this.getTableMember()
  },
};
</script>

<style>
</style>